<template>
  <view class="public-content">
    <view class="public-title">
      {{ $t('index.comment.title') }}
    </view>
    <view class="public-desc">
      {{ $t('index.comment.desc') }}
    </view>
    <view>
      <view class="time-line">
        <view class="title">2024</view>
        <text class="text">국내 최초 비대면 SOHO 부동산담보대출 출시</text>
        <text class="text">인터넷전문은행 최초 자동차대출 출시</text>
      </view>
      <view class="time-line">
        <view class="title">2023</view>
        <text class="text">여수신 합산 30조원 돌파</text>
      </view>
      <view class="time-line">
        <view class="title">2022</view>
        <text class="text">인터넷전문은행 최초 보증부 SOHO대출 출시</text>
      </view>
      <view class="time-line">
        <view class="title">2021</view>
        <text class="text">첫 연간 흑자 달성(당기순이익 255억)</text>
        <text class="text">전세대출 출시</text>
        <text class="text">가상자산거래소(업비트) 실명계좌 제휴</text>
      </view>
    </view>
  </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.public-title {
  margin-top: 20rpx;
}

.public-desc {
  border-bottom: 1px solid #eee;
  padding-bottom: 40rpx;
}

.time-line {
  position: relative;
  padding: 0 0 30rpx 40rpx;

  .title {
    box-sizing: border-box;
    font-family: 'Pretendard K Edition';
    color: rgb(103, 116, 142);
    font-size: 28rpx;
    font-weight: 700;
    line-height: 135%;
    letter-spacing: 0rem;
    white-space: pre-line;
  }

  .text {
    box-sizing: border-box;
    font-family: 'Pretendard K Edition';
    color: rgb(59, 70, 89);
    font-size: 30rpx;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.0125rem;
    white-space: pre-line;
    // padding-left: 10rpx;
  }

  &::after,
  &::before {
    content: '';
    position: absolute;
  }

  &::after {
    top: 4.2rpx;
    left: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 30rpx;
    background: #fff;
    border: 6rpx solid #1728c4;
    box-sizing: border-box;
  }

  &::before {
    width: 2px;
    height: 100%;
    left: 14rpx;
    background: rgb(221, 236, 250);
  }
}
</style>
